<template>
  <div ref="mathContainer" class="math-formula-container"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import katex from 'katex'

const props = defineProps({
  formula: {
    type: String,
    required: true
  },
  displayMode: {
    type: Boolean,
    default: false
  }
})

const mathContainer = ref(null)

// 渲染数学公式
const renderMath = () => {
  if (!mathContainer.value || !props.formula) return
  
  try {
    // 检查是否包含数学公式
    if (props.formula.includes('$$') || props.formula.includes('$')) {
      // 处理混合内容（文本和数学公式）
      renderMixedContent(props.formula)
    } else {
      // 纯文本内容，直接显示
      mathContainer.value.textContent = props.formula
    }
  } catch (error) {
    console.error('数学公式渲染错误:', error)
    mathContainer.value.textContent = props.formula
  }
}

// 处理混合内容（文本和数学公式）
const renderMixedContent = (text) => {
  // 清空容器
  mathContainer.value.innerHTML = ''
  
  // 分割文本和数学公式
  const segments = splitTextAndMath(text)
  
  // 渲染每个片段
  segments.forEach(segment => {
    if (segment.type === 'math') {
      // 创建一个新的span元素用于渲染数学公式
      const span = document.createElement('span')
      katex.render(segment.content, span, {
        throwOnError: false,
        displayMode: props.displayMode || segment.displayMode
      })
      mathContainer.value.appendChild(span)
    } else {
      // 文本内容直接添加
      const textNode = document.createTextNode(segment.content)
      mathContainer.value.appendChild(textNode)
    }
  })
}

// 分割文本和数学公式
const splitTextAndMath = (text) => {
  const segments = []
  let currentIndex = 0
  
  // 查找所有数学公式
  const mathRegex = /\$\$(.*?)\$\$|\$(.*?)\$/g
  let match
  
  while ((match = mathRegex.exec(text)) !== null) {
    const matchStart = match.index
    const matchEnd = mathRegex.lastIndex
    const matchContent = match[1] || match[2] // 获取公式内容（不包括$符号）
    const isDisplayMode = match[0].startsWith('$$')
    
    // 添加公式前的文本
    if (matchStart > currentIndex) {
      segments.push({
        type: 'text',
        content: text.substring(currentIndex, matchStart)
      })
    }
    
    // 添加数学公式
    segments.push({
      type: 'math',
      content: matchContent,
      displayMode: isDisplayMode
    })
    
    currentIndex = matchEnd
  }
  
  // 添加最后一段文本（如果有）
  if (currentIndex < text.length) {
    segments.push({
      type: 'text',
      content: text.substring(currentIndex)
    })
  }
  
  return segments
}

// 处理数学表达式
const processMathExpression = (text) => {
  if (!text) return ''
  
  // 移除外部的 $$ 符号，因为KaTeX会自己处理
  if (text.startsWith('$$') && text.endsWith('$$')) {
    return text.slice(2, -2)
  }
  
  // 移除外部的 $ 符号
  if (text.startsWith('$') && text.endsWith('$')) {
    return text.slice(1, -1)
  }
  
  return text
}

// 在组件挂载后渲染数学公式
onMounted(() => {
  renderMath()
})

// 监听公式变化，重新渲染
watch(() => props.formula, () => {
  renderMath()
})
</script>

<style scoped>
.math-formula-container {
  display: inline;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: normal;
}

/* 确保KaTeX渲染正确 */
:deep(.katex) {
  font-size: 1.1em;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

:deep(.katex-display) {
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  display: inline;
}

:deep(.katex-html) {
  white-space: normal;
  word-break: normal;
}

/* 禁用水平滚动条 */
:deep(.katex-mathml) {
  display: inline-block;
  max-width: 100%;
}

/* 确保公式能够正确显示 */
:deep(.katex-display > .katex) {
  display: inline-block;
  white-space: normal;
  max-width: 100%;
}
</style>
